import { useArray, useMount } from 'hooks'
const TsReactTest = () => {
  const persons: { name: string; age: number }[] = [
    { name: 'jack', age: 25 },
    { name: 'ma', age: 22 }
  ]
  const { value, clear, removeIndex, add } = useArray(persons)
  useMount(() => {
    // console.log(value.notExist);
    // add({ name: 'david' })
    // removeIndex('123')
  })
  return (
    <div>
      <button onClick={() => add({ name: 'join', age: 22 })}>add join</button>
      <button onClick={() => removeIndex(0)}>remove 0</button>
      <button style={{ marginBottom: 50 }} onClick={() => clear()}>
        clear
      </button>
      {value.map((person, index) => (
        <div key={index} style={{ marginBottom: 30 }}>
          <span style={{ color: 'red', marginRight: 10 }}>{index}</span>
          <span>{person.name}</span>
          <span>{person.age}</span>
        </div>
      ))}
    </div>
  )
}

export default TsReactTest
